<template>
  <div class="task-container">
    <div class="content-container">
      <div class="content-top">
        <div class="left">
          <span class="title">我的任务</span>
          <span
            class="icon iconfont icon-icon-test"
            @click="openDialogVisible"
          ></span>
        </div>
        <div class="right">
          <span
            class="long iconfont icon-shupai"
            :class="{ active: !isLong }"
            @click="setIsLong(0)"
          ></span>
          <span
            class="short iconfont icon-hengpai"
            :class="{ active: isLong }"
            @click="setIsLong(1)"
          ></span>
        </div>
      </div>
      <div class="content">
        <ul>
          <li
            class="task-today"
            v-for="item in taskTodayList"
            :key="item.id"
            :style="{ width: isLong ? '100%' : '310px' }"
          >
            <div class="name">
              <label>任务名:</label>
              <span>{{ item.name }}</span>
            </div>
            <div class="description">
              <label>描述:</label>
              <span>{{ item.description }}</span>
            </div>
            <div class="task-content">
              <div class="content-text">内容:</div>
              <span>{{ item.content }}</span>
            </div>
            <div class="target-time">
              <label>预计完成时间:</label>
              <span>{{ processingDate(item.completeTargetTime) }}</span>
            </div>
            <div
              class="is-done"
              :style="{
                borderBottom: item.isDone
                  ? `20px solid rgba(13,172,52,.5)`
                  : `20px solid rgba(224,56,56,.5)`,
              }"
            ></div>
            <div class="tool">
              <span
                @click="handleTaskDetail(item)"
                class="iconfont icon-chakan"
              ></span>
              <span
                @click="handleTaskUpdate(item)"
                class="iconfont icon-bianji"
              ></span>
              <span
                @click="doneTask(item)"
                class="iconfont icon-wanchengquerengouwubiankuang"
              ></span>
              <span
                @click="deleteTask(item.id, item.iDelete)"
                class="iconfont icon-shanchu"
              ></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="sidebar-right">
      <div class="task-today-done">
        <span>今日已完成</span>
        <ul>
          <li
            @click="openMessage(item.name, item.description, item.content)"
            v-for="item in findCompletedTaskToday"
            :key="item.id"
          >
            <div>
              <label>任务:</label>
              <span>{{ item.name }}</span>
            </div>
            <div>
              <label>描述:</label>
              <span>{{ item.description }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="history-task">
        <span>历史任务<a>更多</a></span>
        <ul>
          <li
            @click="openMessage(item.name, item.description, item.content)"
            v-for="item in historyTaskList"
            :key="item.id"
          >
            <div>
              <label>任务:</label>
              <span>{{ item.name }}</span>
            </div>
            <div>
              <label>描述:</label>
              <span>{{ item.description }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Dialog
      :title="isCreateTask ? '创建任务' : '更新任务'"
      :visible.sync="dialogVisible"
      :before-close="beforeClose"
    >
      <div class="dialog-content">
        <div>
          <span>任务名<i>*</i></span>
          <Input placeholder="请输入任务名" v-model="name" />
        </div>
        <div>
          <span>描述</span>
          <Input placeholder="请输入描述" v-model="description" />
        </div>
        <div>
          <span>内容</span>
          <Input placeholder="请输入内容" v-model="content" type="textarea" />
        </div>
        <div>
          <span>预计完成时间<i>*</i></span>
          <DatePicker
            type="datetime"
            placeholder="选择日期"
            v-model="completeTargetTime"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <Button class="cancel" @click="beforeClose">取 消</Button>
        <Button class="determine" type="primary" @click="determineClick"
          >确 定</Button
        >
      </span>
    </Dialog>
    <Dialog
      title="查看详情"
      :visible.sync="seeDetailsVisible"
      class="task-detail"
    >
      <div>
        <label>任务名:</label>
        <span>{{ this.taskDetail.name }}</span>
      </div>
      <div>
        <label>描述:</label>
        <span>{{ this.taskDetail.description }}</span>
      </div>
      <div>
        <label>内容:</label>
        <span>{{ this.taskDetail.content }}</span>
      </div>
      <div>
        <label>是否完成:</label>
        <span>{{ this.taskDetail.isDone ? "完成" : "未完成" }}</span>
      </div>
      <div>
        <label>是否可删除:</label>
        <span>{{ this.taskDetail.iDelete ? "不可删除" : "可删除" }}</span>
      </div>
      <div>
        <label>创建时间:</label>
        <span>{{ processingDate(this.taskDetail.creatiedTime) }}</span>
      </div>
      <div>
        <label>完成时间:</label>
        <span>{{ this.taskDetail.completeTime }}</span>
      </div>
      <div>
        <label>预计完成时间:</label>
        <span>{{ processingDate(this.taskDetail.completeTargetTime) }}</span>
      </div>
    </Dialog>
  </div>
</template>
<script>
import {
  taskTodayList,
  createTaskList,
  findHistoryTask,
  findCompletedTaskToday,
  deleteTask,
  updateTask,
  doneTask,
} from "@/api/task-list";
import el from "element-ui";
import processingDate from '@/util/processing-date';
export default {
  components: {
    Dialog: el.Dialog,
    Button: el.Button,
    Input: el.Input,
    DatePicker: el.DatePicker,
  },
  data() {
    return {
      taskTodayList: [],
      historyTaskList: [],
      findCompletedTaskToday: [],
      isLong: +localStorage.getItem("taskIsLong"),
      name: "",
      description: "",
      content: "",
      completeTargetTime: "",
      dialogVisible: false,
      seeDetailsVisible: false,
      taskDetail: {},
      isCreateTask: true, //弹窗是否为更新任务
      isCreateTaskId: null, //更新任务的id
    };
  },
  methods: {
    init() {
      taskTodayList().then((result) => {
        if (result) {
          this.taskTodayList = result;
        }
      });
      findHistoryTask().then((result) => {
        if (result) {
          this.historyTaskList = result;
        }
      });
      findCompletedTaskToday().then((result) => {
        if (result) {
          this.findCompletedTaskToday = result;
        }
      });
    },
    setIsLong(val) {
      localStorage.setItem("taskIsLong", val);
      this.isLong = +localStorage.getItem("taskIsLong");
    },
    openDialogVisible() {
      this.dialogVisible = true;
      this.isCreateTask = true;
      this.name = "";
      this.description = "";
      this.content = "";
      this.completeTargetTime = "";
    },
    beforeClose() {
      this.dialogVisible = false;
      this.name = "";
      this.description = "";
      this.content = "";
      this.completeTargetTime = "";
    },
    // 点击确定按钮
    determineClick() {
      if (this.name == "" || this.completeTargetTime == "") {
        this.$message({
          showClose: true,
          message: "任务名或预计完成时间不能为空!",
          type: "error",
        });
        return;
      } else {
        if (this.isCreateTask) {
          createTaskList(
            this.name,
            this.description,
            this.content,
            this.completeTargetTime
          ).then((result) => {
            if (result) {
              this.dialogVisible = false;
              this.$message({
                showClose: true,
                message: "添加任务成功!",
                type: "success",
              });
              this.init();
            }
          });
        } else {
          updateTask(
            this.isCreateTaskId,
            this.name,
            this.description,
            this.content,
            this.completeTargetTime
          ).then((result) => {
            if (result[0] == 1) {
              this.dialogVisible = false;
              this.$message({
                showClose: true,
                message: "任务更新成功!",
                type: "success",
              });
              this.init();
            }
          });
        }
      }
    },
    // 弹出消息
    openMessage(name, description, content) {
      this.$notify({
        title: name,
        dangerouslyUseHTMLString: true,
        message: `<div class="openMessage">
            <div class="description">
              <label>描述:</label>
              <span>${description}<span>
            </div>
            <div class="content">
              <label>内容:</label>
              <span>${content}<span>
            </div>
        </div>`,
      });
    },
    // 删除任务
    deleteTask(id, isDelete) {
      this.$confirm("是否删除此项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (isDelete) {
            this.$message({
              showClose: true,
              message: "您没有权限删除!",
              type: "warning",
            });
          } else {
            deleteTask(id).then((result) => {
              if (result > 0) {
                this.$message({
                  showClose: true,
                  message: "删除成功!",
                  type: "success",
                });
                this.init();
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看详情
    handleTaskDetail(item) {
      this.seeDetailsVisible = true;
      this.taskDetail = {
        ...item,
      };
    },
    // 更新任务
    handleTaskUpdate(item) {
      this.dialogVisible = true;
      this.isCreateTask = false;
      this.isCreateTaskId = item.id;
      this.name = item.name;
      this.description = item.description;
      this.content = item.content;
      this.completeTargetTime = item.completeTargetTime;
    },
    // 点击完成任务
    doneTask(item) {
      this.$confirm("是否完成此任务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        doneTask(item.id).then(() => {
          this.$message({
            type: "success",
            message: "更改任务状态完成!",
          });
          this.init();
        });
      });
    },
    // 处理时间格式
    processingDate(date){
      return processingDate(date);
    }
  },
  computed: {},
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>